<html>
    <!--
    Cold Start: WAAPI

    This benchmarks cold start - when an animation library has to
    read values from the DOM.

    Run in private browsing mode to avoid browser plugins interfering with
    benchmark.
  -->
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                padding: 100px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .container > div {
                width: 100px;
                height: 100px;
            }

            .box {
                width: 10px;
                height: 100px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script>
            // Create boxes
            const numBoxes = 100
            let html = ``
            for (let i = 0; i < numBoxes; i++) {
                html += `<div><div class="box"></div></div>`
            }
            document.querySelector(".container").innerHTML = html
            const boxes = document.querySelectorAll(".box")

            setTimeout(() => {
                boxes.forEach((box) => {
                    const animation = box.animate(
                        {
                            rotate: Math.random() * 360 + "deg",
                            backgroundColor: "#f00",
                            width: Math.random() * 100 + "%",
                            translate: "5px 0",
                        },
                        {
                            duration: 1000,
                            fill: "both",
                        }
                    )
                    animation.onfinish = () => {
                        requestAnimationFrame(() => {
                            animation.commitStyles()
                            animation.cancel()
                        })
                    }
                })

                setTimeout(() => {
                    boxes.forEach((box) => {
                        const animation = box.animate(
                            {
                                width: Math.random() * 100 + "px",
                                translate: "50% 0",
                            },
                            {
                                duration: 1000,
                                fill: "both",
                            }
                        )
                        animation.onfinish = () => {
                            requestAnimationFrame(() => {
                                animation.commitStyles()
                                animation.cancel()
                            })
                        }
                    })
                }, 1500)
            }, 1000)
        </script>
    </body>
</html>
